<template>
	<view class="head_bg">
		<image :src="imgHost + globalNetworkImageStore.value.personTopImg" class="img" mode="widthFix" />
	</view>
	<view class="container_c">
		<view class="user_info_wrap">
			<view class="user_info">
				<view class="face">
					<fr-image class="img" mode="aspectFill" :src="userInfo ? userInfo.head_img : noneImg" />
				</view>
				<view class="right_content">
					<template v-if="userInfo">
						<view class="top">
							<view class="nick one-line">{{userInfo ? userInfo.nickname : '暂无昵称'}}</view>
							<view class="improveInformation" hover-class="hover"
								@click="navigator('improveInformation')">
								<text>{{userInfo.is_perfect_info===2?'完善':'个人'}}信息</text>
								<u-icon name="arrow-right" color="#606881" size="15"></u-icon>
							</view>
						</view>
						<view class="tags">
							<view class="control">
								<view v-if="userInfo.is_shop_manage == 1" class="tag">{{
								    userInfo.shop_manage_xlh
								}}</view>
								<view v-if="userInfo.area_info && userInfo.area_info.area_dls_name" class="tag">
									{{ userInfo.area_info.area_dls_name }}
								</view>
								<block v-if="userInfo.is_agent == 1 || userInfo.is_dis == 1">
									<view v-if="userInfo.is_agent == 1" class="tag">{{
								        userInfo.agentDa.dls_name
								    }}</view>
									<view v-if="userInfo.is_dis == 1" class="tag">{{
								        userInfo.disDa.dis_name
								    }}</view>
								</block>
								<view v-else-if="userInfo.rank && userInfo.rank.rank_name" class="tag">
									{{ userInfo.rank.rank_name }}
								</view>
							</view>
							<!--上面都不存在，才显示游客，是用css控制的-->
							<view class="tourist">
								<view class="tag">游客</view>
							</view>
						</view>
					</template>
					<view v-else @click="login()" class="login">登录</view>
				</view>
			</view>
			<view v-if="userInfo" class="bottom">
				<view class="id">UID：{{ userInfo ? userInfo.user_id : '请先登录' }}</view>
				<view>注册时间：{{ userInfo.create_at }}</view>
			</view>
		</view>
		<view class="wallet">
			<image :src="imgHost + globalNetworkImageStore.value.personMoneyImg" class="bg" />
			<view class="item" hover-class="hover" @click="navigator('commission')">
				<view class="title">我的钱包(元)</view>
				<view class="bottom">
					<view class="num">{{ statistics.commission || 0 }}</view>
					<view class="arrow center">
						<uni-icons type="right" size="10px" color="#fff"></uni-icons>
					</view>
				</view>
			</view>
			<view class="item" hover-class="hover" @click="navigator('order-team')">
				<view class="title">待结算金额(元)</view>
				<view class="bottom">
					<view class="num">{{ statistics.not_order_commission || 0 }}</view>
					<view class="arrow center">
						<uni-icons type="right" size="10px" color="#fff"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="bar">
			<view class="title">我的订单</view>
			<u-grid :border="false" col="4">
				<u-grid-item>
					<view class="item" @click="navigator('order', '?type=0')">
						<image src="/static/image/my-dfk.png" class="icon" />
						<view class="text">待付款</view>
						<view class="badge">
							<u-badge max="99" :value="orderCount.dfk_count" :bgColor="secondaryColor"></u-badge>
						</view>
					</view>
				</u-grid-item>
				<u-grid-item>
					<view class="item" @click="navigator('order', '?type=1')">
						<image src="/static/image/my-dfh.png" class="icon" />
						<view class="text">待发货</view>
						<view class="badge">
							<u-badge max="99" :value="orderCount.dfh_count" :bgColor="secondaryColor"></u-badge>
						</view>
					</view>
				</u-grid-item>
				<u-grid-item>
					<view class="item" @click="navigator('order', '?type=2')">
						<image src="/static/image/my-dsh.png" class="icon" />
						<view class="text">待收货</view>
						<view class="badge">
							<u-badge max="99" :value="orderCount.dsh_count" :bgColor="secondaryColor"></u-badge>
						</view>
					</view>
				</u-grid-item>
				<u-grid-item>
					<view class="item" @click="navigator('order', '?type=3')">
						<image src="/static/image/my-ywc.png" class="icon" />
						<view class="text">已完成</view>
						<view class="badge">
							<u-badge max="99" :value="orderCount.ywc_count" :bgColor="secondaryColor"></u-badge>
						</view>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="bar">
			<view class="title">分销中心</view>
			<u-grid :border="false" col="4">
				<u-grid-item>
					<view class="item" @click="navigator('commission')">
						<image src="/static/image/my-wdyj.png" class="icon" />
						<view class="text">我的钱包</view>
					</view>
				</u-grid-item>
				<block v-if="
                        userInfo &&
                        (userInfo.is_dis === 1 ||
                            userInfo.is_agent === 1 ||
                            userInfo.is_shop_manage == 1)
                    ">
					<u-grid-item>
						<view class="item" @click="navigator('team')">
							<image src="/static/image/my-wdtd.png" class="icon" />
							<view class="text">我的团队</view>
						</view>
					</u-grid-item>
					<u-grid-item>
						<view class="item" @click="navigator('order-team')">
							<image src="/static/image/my-tddd.png" class="icon" />
							<view class="text">团队订单</view>
						</view>
					</u-grid-item>
					<u-grid-item>
						<view class="item" @click="toShareCard">
							<image src="/static/image/my-fxmp.png" class="icon" />
							<view class="text">分享名片</view>
						</view>
					</u-grid-item>
					<u-grid-item>
						<view class="item" @click="navigator('temporary-customers')">
							<image src="/static/image/my-wdkh.png" class="icon" />
							<view class="text">临时客户</view>
						</view>
					</u-grid-item>
					<u-grid-item>
						<view class="item" @click="navigator('team-achievement')">
							<image src="/static/image/my-tdyj.png" class="icon" />
							<view class="text">团队业绩</view>
						</view>
					</u-grid-item>
					<u-grid-item>
						<view class="item" @click="navigator('dividendPool')">
							<image src="/static/image/my-wdyj.png" class="icon" />
							<view class="text">分红池</view>
						</view>
					</u-grid-item>
				</block>
			</u-grid>
		</view>
		<view class="bar">
			<view class="title">其他功能</view>
			<u-grid :border="false" col="4">
				<!-- <u-grid-item>
					<view class="item" @click="navigator('refund-order')">
						<image src="/static/image/my-shdd.png" class="icon" />
						<view class="text">售后订单</view>
					</view>
				</u-grid-item> -->
				<u-grid-item>
					<view class="item" @click="navigator('address')">
						<image src="/static/image/my-dzgl.png" class="icon" />
						<view class="text">地址管理</view>
					</view>
				</u-grid-item>
				<u-grid-item>
					<view class="item" @click="navigator('bank')">
						<image src="/static/image/my-yhkgl.png" class="icon" />
						<view class="text">银行卡管理</view>
					</view>
				</u-grid-item>
				<u-grid-item>
					<view class="item" @click="navigator('article', '?id=1&title=关于我们')">
						<image src="/static/image/my-gywm.png" class="icon" />
						<view class="text">关于我们</view>
					</view>
				</u-grid-item>
				<u-grid-item>
					<view class="item" @click="navigator('customer-service')">
						<image src="/static/image/my-lxkf.png" class="icon" />
						<view class="text">联系客服</view>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
	<tabbar :active="3"></tabbar>
	<!--完善信息弹出层-->
	<u-modal :show="showImproveInformationModal" title="提示" content='请先完善个人信息，即将前往完善信息，是否立即前往？'
		:confirmColor="primaryColor" showCancelButton cancelText="关闭" confirmText="前往"
		@cancel="showImproveInformationModal=false"
		@confirm="showImproveInformationModal=false;$u.route('/pages/improveInformation/improveInformation')"></u-modal>
</template>

<script setup>
	import { ref, computed } from 'vue';
	import noneImg from '/static/image/none-img.jpg';
	import request from '@/utils/common/request/index';
	import { useUserStore } from '@/store/modules/useUserStore';
	import { onShow } from '@dcloudio/uni-app';
	import tabbar from '@/components/tabbar/tabBar.vue';
	// #ifdef H5
	import { H5Login } from '@/utils/h5/index';
	// #endif
	import { useGlobalNetworkImageStore } from '@/store/modules/useGlobalNetworkImage.js';
	import { useGetThemColor } from '@/hooks/useGetThemColor';

	const { primaryColor, secondaryColor } = useGetThemColor();
	const { imgHost } = getApp().globalData;
	onShow(() => {
		const token = uni.getStorageSync('token');
		if (token) {
			request({ url: '/api/uinfo' }).then((res) => {
				const userStore = useUserStore();
				userStore.setData(res);
			});
		}
		getOrderCount();
	});
	const globalNetworkImageStore = useGlobalNetworkImageStore();

	/**获取订单数量 */
	let orderCount = ref({});
	const getOrderCount = () => {
		request({
			url: '/api/ordercount',
		}).then((res) => {
			orderCount.value = res;
		});
		getWalletDetail();
	};

	// * 获取钱包明细
	let statistics = ref({});
	const getWalletDetail = () => {
		request({
			url: '/api/myservice',
		}).then((res) => {
			statistics.value = res;
		});
	};

	const userStore = useUserStore();
	let userInfo = computed(() => {
		return userStore.value;
	});

	const navigator = (pages, query) => {
		let url = `/pages/${pages}/${pages}`;
		if (query) url += `${query}`;
		uni.navigateTo({
			url,
		});
	};

	//前往分享名片
	const showImproveInformationModal = ref(false);
	const toShareCard = () => {
		if (userInfo.value.is_perfect_info === 2) {
			showImproveInformationModal.value = true;
		} else {
			navigator('card');
		}
	}

	const login = () => {
		// #ifdef H5
		H5Login();
		// #endif
	};
</script>

<style scoped lang="scss">
	.head_bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 0;

		.img {
			width: 100%;
		}
	}

	.container_c {
		position: absolute;
		top: 0;
		left: 14px;
		right: 14px;
		z-index: 1;
		padding-bottom: 80px;
	}

	.user_info_wrap {
		margin: 236rpx 0 10px;
		padding: 14px 14px 10px;
		border-radius: 35px 10px 10px;
		background-color: #fff;

		.user_info {
			display: flex;

			.face {
				flex-shrink: 0;
				width: 52px;
				height: 52px;
				border-radius: 50%;
				overflow: hidden;

				.img {
					width: 100%;
					height: 100%;
				}
			}

			.right_content {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				padding-left: 10px;

				.top {
					margin-bottom: 2px;
					display: flex;
					align-items: center;
				}

				.nick {
					flex: 1;
					font-size: 18px;
					font-weight: 500;
					color: #000e37;
				}

				.improveInformation {
					display: flex;
					align-items: center;
					padding-left: 2px;
					color: #606881;
				}

				.tags {
					color: #fff;

					.control,
					.tourist {
						display: flex;
					}

					.tourist {
						display: none;
					}

					.control:empty+.tourist {
						display: flex;
					}

					.tag {
						transform: scale(0.9) translateX(-3px);
						padding: 2px 8px;
						font-size: 12px;
						background: v-bind(secondaryColor);
						border-radius: 4px;

						&+.tag {
							margin-left: 1px;
						}
					}
				}

				.id {
					font-size: 14px;
					color: #606881;
				}

				.login {
					font-size: 16px;
					font-weight: bold;
				}
			}
		}

		.bottom {
			margin-top: 10px;
			display: flex;
			justify-content: space-between;
			font-size: 12px;
			color: #606881;
		}
	}

	.wallet {
		box-sizing: border-box;
		margin-bottom: 10px;
		position: relative;
		overflow: hidden;
		display: flex;
		padding: 20px 25px;
		border-radius: 10px;

		.bg {
			position: absolute;
			z-index: -1;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}

		.item {
			color: #fff;

			&+.item {
				margin-left: 60px;
			}

			.title {
				margin-bottom: 10px;
				font-size: 12px;
			}

			.bottom {
				display: flex;
				align-items: center;

				.num {
					margin-right: 4px;
					font-weight: bold;
				}

				.arrow {
					width: 14px;
					height: 14px;
					border-radius: 50%;
					overflow: hidden;
					background: rgba(255, 255, 255, 0.26);
				}
			}
		}
	}

	.bar {
		margin-bottom: 10px;
		border-radius: 10px;
		background-color: #fff;
		overflow: hidden;

		.title {
			font-weight: bold;
			color: #000e37;
			padding: 10px;
		}

		.item {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 14px 0;

			.icon {
				width: 26px;
				height: 26px;
			}

			.text {
				margin-top: 10px;
				font-size: 12px;
				color: #000e37;
			}

			.badge {
				position: absolute;
				right: -12px;
				top: 5px;
			}
		}
	}
</style>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>